<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html charset=UTF-8 ">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding: 0;}/*去掉页面样式*/
        body{color: white;}
        .content{
            position: absolute;
            background-color: #FFCCCC;
            top: 0%;
            left: 0;
            width: 100%;
            height:90%;
            overflow: hidden;/*隐藏滚动条*/
        }
        /*        .main{
                    text-align: center;!*文本居中*!
                    max-width: 600px;
                    height: 400px;
                    padding: 100px 0px;!*上下80px,左右为0*!
                    margin: 0 auto;!*设置上右下左,居中显示*!
                }*/
        .main{
            /*盒子的实际宽（高）= 内容（width/height）+padding（两边）+border（两边）+margin（两边） */
            /* text-align: center;!*文本居中*!
             max-width: 100%;
             height: 20%;
             padding: 10% 0px;!*上下80px,左右为0*!
             margin: 0 auto;!*设置上右下左,居中显示*!*/
            position: relative;
            top: 28%;
            text-align: center;/*文本居中*/
            max-width: 100%;
            height: 20%;
            padding: 0px 0px;/*内边距:上下80px,左右为0*/
            margin: 0;/*外边距:设置上右下左,居中显示*/
        }
        .main h1{
            font-family: "楷体";
            font-size: 360%;
            font-weight: 100;
        }
        form{
            padding: 20px 0;
        }
        form input{
            border: 1px solid #CCFFFF;
            display: block;
            margin: 0px auto 10px auto;/*上 右 下 左*/
            padding: 10px;
            width: 220px;
            border-radius: 30px;/*H5设置圆角边框*/
            font-size: 18px;
            font-weight: 300;
            text-align: center;
        }
        form input:hover{
            background-color: #CCFFFF;
        }
        form button{
            background-color: #FFFFCC;
            border-radius: 10px;
            border: 0;
            height: 30px;
            width: 50px;
            padding: 5px 10px;
        }
        form button:hover{
            background-color: #FFFFCC;
        }
        .end{
            position: absolute;
            background-color: #CCFFFF;
            top: 90%;
            /*padding-bottom: 25%;*/
            left: 0;
            width: 100%;
            height: 10%;
            overflow: hidden;/*隐藏滚动条*/
        }
    </style>
</head>
<body>
<div class="content">
    <div class="main">
        <h1>Welcome</h1>
        <form>
            <label>
                <input type="text" name="useid" placeholder="请输入账号"/>
            </label>
            <label>
                <input type="password" name="password" placeholder="请输入密码"/>
            </label>
            <button type="submit">登&nbsp;&nbsp;录</button>
        </form>
    </div>
</div>

<div class="end">
</div>


</body>

</html>